<template>
  <div class="weather-cls" id="he-plugin-simple" v-if='token'></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount,ref } from "vue";
window.WIDGET = {
  CONFIG: {
    modules: "01234",
    background: "1",
    tmpColor: "FFFFFF",
    tmpSize: "16",
    cityColor: "FFFFFF",
    citySize: "16",
    aqiColor: "FFFFFF",
    aqiSize: "16",
    weatherIconSize: "24",
    alertIconSize: "18",
    padding: "10px 10px 10px 10px",
    shadow: "0",
    language: "auto",
    borderRadius: "5",
    fixed: "true",
    vertical: "top",
    horizontal: "left",
    right: "10",
    bottom: "10",
    key: "4a094a9db8a8439c97e82baf1ecc1754",
  },
};
let _id = null;
const token=ref('')
onMounted(() => {
token.value=sessionStorage.getItem('token');
  let script = document.createElement("script");
  script.src =
    "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
  document.getElementsByTagName("head")[0].appendChild(script);
  let flag = false;
  _id = setInterval(() => {
    if (document.getElementById("he-plugin-simple") && !flag) {
      document.getElementById("he-plugin-simple").style =
        "position:absolute;right:10px;bottom:10px;z-index:10";
      flag = true;
    }
    if (flag) {
      clearInterval(_id);
      _id = null;
    }
  }, 1000);
});
onBeforeUnmount(() => {
  if (_id) {
    clearInterval(_id);
    _id = null;
  }
});
</script>

<style lang="less" scoped>
/deep/ #he-plugin-simple {
  z-index: 9999;
}
</style>